import TaskGantt from "@/components/gantt-v2";
import type { TaskProps } from "./components/gantt-v2/types";
// import TaskGantt from "@/components/gantt";
// import type { TaskProps } from "./components/gantt/types";
import dayjs from "dayjs";
const tasksStart = dayjs("2025-05-29");
// const tasksEnd = dayjs("2025-07-29");
const tasksEnd = dayjs("2025-07-01");
const tasks: TaskProps[] = [
  {
    id: "1",
    name: "项目规划阶段",
    start: dayjs("2025-05-29"),
    end: dayjs("2025-06-06"),
    progress: 75,
    type: "Project",
    backgroundColor: "#3B82F6",
    children: [
      {
        id: "1-1",
        name: "需求分析",
        start: dayjs("2025-06-01"),
        end: dayjs("2025-06-03"),
        progress: 100,
        type: "Task",
        backgroundColor: "#10B981",
      },
      {
        id: "1-2",
        name: "技术选型",
        start: dayjs("2025-06-02"),
        end: dayjs("2025-06-04"),
        progress: 80,
        type: "Task",
        backgroundColor: "#F59E0B",
        children: [
          {
            id: "1-2-1",
            name: "前端框架选择",
            start: dayjs("2025-06-02"),
            end: dayjs("2025-06-03"),
            progress: 100,
            type: "Task",
            backgroundColor: "#8B5CF6",
          },
          {
            id: "1-2-2",
            name: "后端架构设计",
            start: dayjs("2025-06-03"),
            end: dayjs("2025-06-04"),
            progress: 60,
            type: "Task",
            backgroundColor: "#EF4444",
          },
        ],
      },
      {
        id: "1-3",
        name: "项目计划制定",
        start: dayjs("2025-06-04"),
        end: dayjs("2025-06-06"),
        progress: 50,
        type: "Task",
        backgroundColor: "#06B6D4",
      },
    ],
  },
  {
    id: "2",
    name: "开发阶段",
    start: dayjs("2025-06-01"),
    end: dayjs("2025-06-20"),
    progress: 30,
    type: "Project",
    backgroundColor: "#F97316",
    children: [
      {
        id: "2-1",
        name: "前端开发",
        start: dayjs("2025-06-08"),
        end: dayjs("2025-06-15"),
        progress: 40,
        type: "Task",
        backgroundColor: "#84CC16",
        children: [
          {
            id: "2-1-1",
            name: "组件开发",
            start: dayjs("2025-06-09"),
            end: dayjs("2025-06-10"),
            progress: 70,
            type: "Task",
            backgroundColor: "#EC4899",
          },
          {
            id: "2-1-2",
            name: "页面集成",
            start: dayjs("2025-06-11"),
            end: dayjs("2025-06-15"),
            progress: 20,
            type: "Task",
            backgroundColor: "#14B8A6",
          },
        ],
      },
      {
        id: "2-2",
        name: "后端开发",
        start: dayjs("2025-06-08"),
        end: dayjs("2025-06-18"),
        progress: 25,
        type: "Task",
        backgroundColor: "#6366F1",
        children: [
          {
            id: "2-2-1",
            name: "API开发",
            start: dayjs("2025-06-09"),
            end: dayjs("2025-06-12"),
            progress: 50,
            type: "Task",
            backgroundColor: "#F43F5E",
          },
          {
            id: "2-2-2",
            name: "数据库设计",
            start: dayjs("2025-06-10"),
            end: dayjs("2025-06-14"),
            progress: 30,
            type: "Task",
            backgroundColor: "#A855F7",
          },
          {
            id: "2-2-3",
            name: "系统集成",
            start: dayjs("2025-06-15"),
            end: dayjs("2025-06-18"),
            progress: 0,
            type: "Task",
            backgroundColor: "#0EA5E9",
          },
        ],
      },
      {
        id: "2-3",
        name: "测试准备",
        start: dayjs("2025-06-18"),
        end: dayjs("2025-06-20"),
        progress: 0,
        type: "Task",
        backgroundColor: "#22C55E",
      },
    ],
  },
  {
    id: "3",
    name: "测试阶段",
    start: dayjs("2025-06-21"),
    end: dayjs("2025-06-28"),
    progress: 0,
    type: "Project",
    backgroundColor: "#DC2626",
    children: [
      {
        id: "3-1",
        name: "单元测试",
        start: dayjs("2025-06-21"),
        end: dayjs("2025-06-23"),
        progress: 0,
        type: "Task",
        backgroundColor: "#7C3AED",
      },
      {
        id: "3-2",
        name: "集成测试",
        start: dayjs("2025-06-24"),
        end: dayjs("2025-06-26"),
        progress: 0,
        type: "Task",
        backgroundColor: "#059669",
      },
      {
        id: "3-3",
        name: "用户验收测试",
        start: dayjs("2025-06-27"),
        end: dayjs("2025-06-28"),
        progress: 0,
        type: "Task",
        backgroundColor: "#DB2777",
      },
    ],
  },
  {
    id: "4",
    name: "部署上线",
    start: dayjs("2025-06-29"),
    end: dayjs("2025-06-30"),
    progress: 0,
    type: "Milestone",
    backgroundColor: "#7C2D12",
  },
  // 添加更多测试数据以确保滚动效果
  // ...Array.from({ length: 20 }, (_, i) => ({
  //   id: `test-${i + 5}`,
  //   name: `测试任务 ${i + 1}`,
  //   start: dayjs("2025-07-01").add(i, "day"),
  //   end: dayjs("2025-07-01").add(i + 2, "day"),
  //   progress: Math.floor(Math.random() * 100),
  //   type: "Task" as const,
  //   backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`,
  // })),
];

function App() {
  return (
    <div className="flex flex-col justify-center items-center w-full h-screen">
      <div className="w-250 h-160">
        <TaskGantt
          title="Task Gantt"
          taskList={tasks}
          tasksStart={tasksStart}
          tasksEnd={tasksEnd}
          className="w-full h-full"
        />
      </div>
    </div>
  );
}

export default App;
